<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>环境监控面板</title>
    <!-- 引入ECharts（图表库）和Tailwind CSS（样式库） -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 图表容器高度固定，确保可视化效果 */
        .chart-container { height: 280px; width: 100%; }
    </style>
</head>
<body class="bg-gray-50 p-4">
    <div class="max-w-7xl mx-auto">
        <!-- 上半部分：左（温度图）+ 中（状态标签）+ 右（湿度图） -->
        <div class="grid grid-cols-12 gap-4 mb-4">
            <!-- 左侧：温度折线图 -->
            <div class="col-span-5 bg-white rounded-lg shadow p-3">
                <h3 class="text-gray-700 font-medium mb-2">温度监控 (℃)</h3>
                <div id="tempChart" class="chart-container"></div>
            </div>

            <!-- 中间：垂直排列的状态标签 -->
            <div class="col-span-2 bg-white rounded-lg shadow p-3 flex flex-col justify-center items-center gap-6">
                <div class="text-center">
                    <p class="text-gray-500 text-sm">运行状态</p>
                    <p class="text-lg font-semibold text-green-600">{{ states.run_status }}</p>
                </div>
                <div class="text-center">
                    <p class="text-gray-500 text-sm">运行模式</p>
                    <p class="text-lg font-semibold text-blue-600">{{ states.run_mode }}</p>
                </div>
                <div class="text-center">
                    <p class="text-gray-500 text-sm">电源状态</p>
                    <p class="text-lg font-semibold text-purple-600">{{ states.power_status }}</p>
                </div>
            </div>

            <!-- 右侧：湿度折线图 -->
            <div class="col-span-5 bg-white rounded-lg shadow p-3">
                <h3 class="text-gray-700 font-medium mb-2">湿度监控 (%)</h3>
                <div id="humidChart" class="chart-container"></div>
            </div>
        </div>

        <!-- 下半部分：4个水平排列的相同卡片 -->
        <div class="grid grid-cols-4 gap-4">
            {% for card in cards %}
            <div class="bg-white rounded-lg shadow p-4 border-l-4" style="border-left-color: {{ card.color }};">
                <div class="flex justify-between items-start mb-2">
                    <h4 class="font-semibold text-gray-800">{{ card.name }}</h4>
                    <span class="text-xs px-2 py-1 rounded-full" style="background-color: {{ card.color }}20; color: {{ card.color }};">
                        {{ card.status }}
                    </span>
                </div>
                <p class="text-gray-500 text-sm">设备ID: {{ card.id }}</p>
                <p class="text-gray-400 text-xs mt-3">最后更新: 刚刚</p>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 初始化图表 -->
    <script>
        // 温度图表初始化
        const tempChart = echarts.init(document.getElementById('tempChart'));
        tempChart.setOption({
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: {{ times|tojson }} },
            yAxis: { type: 'value', min: 20, max: 30, name: '℃' },
            series: [{
                name: '温度',
                type: 'line',
                data: {{ temps|tojson }},
                lineStyle: { color: '#FF9800' },
                itemStyle: { color: '#FF9800' },
                smooth: true
            }]
        });

        // 湿度图表初始化
        const humidChart = echarts.init(document.getElementById('humidChart'));
        humidChart.setOption({
            tooltip: { trigger: 'axis' },
            xAxis: { type: 'category', data: {{ times|tojson }} },
            yAxis: { type: 'value', min: 40, max: 70, name: '%' },
            series: [{
                name: '湿度',
                type: 'line',
                data: {{ humids|tojson }},
                lineStyle: { color: '#2196F3' },
                itemStyle: { color: '#2196F3' },
                smooth: true
            }]
        });

        // 窗口大小变化时，自动调整图表尺寸
        window.addEventListener('resize', () => {
            tempChart.resize();
            humidChart.resize();
        });
    </script>
</body>
</html>